/*
 * @Author: wangqizhang
 * @Date: 2024-04-23 16:55:02
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-24 18:26:32
 * @FilePath: /suixinji-react/src/page/home/components/footer/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState } from 'react';
import { Button, Tooltip, Space } from 'antd';
import './index.scss';
import AddNote from './comp/AddNote';
import AddGroup from './comp/AddGroup';
import { GroupOutlined, BookOutlined, HomeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const Footer = () => {
  const navigate = useNavigate();
  const [noteVisible, setNoteVisible] = useState(false);
  const [groupVisible, setGroupVisible] = useState(false);
  const showModal = (type: string) => {
    if (type === 'note') {
      setNoteVisible(true);
    } else {
      setGroupVisible(true);
    }
  };
  const onCancel = (type: string) => {
    if (type === 'note') {
      setNoteVisible(false);
    } else {
      setGroupVisible(false);
    }
  };
  return (
    <div className="footer">
      <AddNote open={noteVisible} onCancel={() => onCancel('note')}></AddNote>
      <AddGroup
        open={groupVisible}
        onCancel={() => onCancel('group')}
      ></AddGroup>
      <div>
        <Space size="large">
          <Tooltip title={'回到首页'}>
            <Button onClick={() => navigate('/home')}>
              <HomeOutlined
                style={{ fontSize: '20px', color: 'rgb(115, 137, 224)' }}
              ></HomeOutlined>
            </Button>
          </Tooltip>
          <Tooltip title={'分组管理'}>
            <Button onClick={() => navigate('/home/group_config')}>
              <GroupOutlined
                style={{ fontSize: '20px', color: 'rgb(115, 137, 224)' }}
              ></GroupOutlined>
            </Button>
          </Tooltip>
          <Tooltip title={'笔记管理'}>
            <Button>
              <BookOutlined
                style={{ fontSize: '20px', color: 'rgb(115, 137, 224)' }}
              ></BookOutlined>
            </Button>
          </Tooltip>
          <Tooltip title={'添加自定义分组'}>
            <Button onClick={() => showModal('group')}>
              <span>
                <svg
                  t="1713869917406"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7648"
                  width="20"
                  height="20"
                >
                  <path
                    d="M83.968 1010.924308c-39.936 0-71.916308-34.028308-71.916308-76.484923v-575.015385c0-42.535385 31.980308-76.484923 71.916308-76.484923H686.08c39.936 0 71.916308 34.028308 71.916308 76.484923v575.015385c0 42.456615-31.980308 76.484923-71.916308 76.484923H83.968z m0-677.336616c-13.312 0-24.339692 11.815385-24.339692 25.836308v583.443692h1.575384c3.072 10.003692 11.815385 17.329231 22.528 17.329231H686.08c13.312 0 24.260923-11.736615 24.260923-25.757538v-575.015385c0-14.020923-11.027692-25.836308-24.260923-25.836308H83.968z m753.664 464.896v-575.015384c0-14.020923-11.027692-25.836308-24.418462-25.836308h-538.781538a24.418462 24.418462 0 0 1-23.630769-25.048615c0-13.312 10.24-25.127385 23.630769-25.127385h538.072615c39.936 0 71.916308 34.107077 71.916308 76.563692v575.251693c0 13.312-10.24 25.048615-23.552 25.048615-13.312 0-23.236923-10.712615-23.236923-25.836308z m127.448615-134.931692V88.615385c0-14.099692-11.027692-25.836308-24.339692-25.836308h-538.781538a24.418462 24.418462 0 0 1-23.63077-25.127385c0-13.312 10.24-25.048615 23.63077-25.048615h537.993846c39.936 0 71.995077 34.028308 71.995077 76.563692V664.024615c0 13.312-10.24 25.048615-23.63077 25.048616a23.788308 23.788308 0 0 1-23.236923-25.6z"
                    fill="rgb(115, 137, 224)"
                    p-id="7649"
                  ></path>
                  <path
                    d="M0 934.439385v-575.015385c0-49.388308 37.651692-89.560615 83.968-89.560615H686.08c46.316308 0 83.968 40.172308 83.968 89.560615v575.015385C770.048 983.827692 732.396308 1024 686.08 1024H83.968C37.651692 1024 0 983.827692 0 934.439385z m83.968-638.739693c-33.083077 0-59.628308 28.672-59.628308 63.803077v574.936616c0 35.052308 26.860308 63.724308 59.628308 63.724307H686.08c33.004308 0 59.628308-28.672 59.628308-63.803077V359.502769c0-35.052308-26.860308-63.724308-59.628308-63.724307H83.968z m-30.247385 659.928616H47.576615V359.424c0-21.267692 16.384-38.596923 36.391385-38.596923H686.08c19.928615 0 36.312615 17.329231 36.312615 38.596923v575.015385c0 21.267692-16.384 38.596923-36.312615 38.596923H83.968a35.682462 35.682462 0 0 1-30.247385-17.329231z m30.247385-609.201231c-6.695385 0-12.051692 5.828923-12.051692 12.996923v576.275692l1.024 3.072c1.260308 4.096 4.883692 8.664615 11.264 8.664616h601.796923c6.695385 0 12.051692-5.828923 12.051692-12.996923v-575.015385c0-6.852923-5.592615-12.996923-11.972923-12.996923H83.968z m741.612308 452.056615v-575.015384c0-6.852923-5.671385-12.996923-12.051693-12.996923H274.432c-19.692308 0-35.603692-16.935385-35.603692-37.888 0-21.031385 15.911385-37.888 35.603692-37.888h538.072615c46.316308 0 83.968 40.172308 83.968 89.560615v575.015385c0 20.952615-15.832615 37.809231-35.603692 37.80923-19.928615 0-35.288615-16.541538-35.288615-38.596923zM274.432 160.689231c-6.931692 0-11.264 6.459077-11.264 12.051692 0 7.404308 5.907692 12.051692 11.264 12.051692h538.781538c20.007385 0 36.391385 17.329231 36.391385 38.596923v575.015385c0 7.640615 4.647385 13.075692 11.264 13.075692 6.931692 0 11.264-6.459077 11.264-12.051692v-575.015385c0-35.052308-26.860308-63.724308-59.628308-63.724307H274.432z m687.812923 529.408a37.257846 37.257846 0 0 1-9.452308-27.096616V88.615385c0-6.931692-5.671385-13.075692-12.051692-13.075693h-538.781538C382.109538 75.618462 366.276923 58.683077 366.276923 37.809231c0-21.031385 15.832615-37.651692 35.524923-37.651693h538.072616C986.348308 0 1024 40.172308 1024 89.639385v575.015384c0 20.952615-15.832615 37.809231-35.524923 37.809231a36.548923 36.548923 0 0 1-26.151385-12.288zM401.880615 25.678769c-6.852923 0-11.264 6.301538-11.264 11.972923 0 7.483077 5.907692 12.051692 11.264 12.051693h538.860308c20.007385 0 36.391385 17.408 36.391385 38.596923v576.039384a11.342769 11.342769 0 0 0 11.264 12.051693c6.852923 0 11.264-6.459077 11.264-12.051693v-575.015384c0-34.973538-26.939077-63.645538-59.707077-63.645539h-537.993846z"
                    fill="rgb(115, 137, 224)"
                    p-id="7650"
                  ></path>
                </svg>
              </span>
            </Button>
          </Tooltip>
          <Tooltip title={'添加笔记📒'}>
            <Button onClick={() => showModal('note')}>
              <span>
                <svg
                  t="1713865142963"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4426"
                  width="20"
                  height="20"
                >
                  <path
                    d="M978.1 281.5v566.8c0 71.6-58.3 129.9-129.9 129.9H175.8c-71.6 0-129.9-58.3-129.9-129.9V175.8c0-71.6 58.3-129.9 129.9-129.9h543.8V0H175.8C78.8 0 0 78.8 0 175.8v672.5C0 945.2 78.8 1024 175.8 1024h672.5c96.9 0 175.8-78.8 175.8-175.8V281.5h-46z"
                    p-id="4427"
                    fill="rgb(115, 137, 224)"
                  ></path>
                  <path
                    d="M433.7 590.3c8.9 8.9 23.5 8.9 32.4 0l551.2-551.2c8.9-8.9 8.9-23.5 0-32.4-8.9-8.9-23.5-8.9-32.4 0L433.7 557.9c-8.9 8.9-8.9 23.5 0 32.4z"
                    p-id="4428"
                    fill="rgb(115, 137, 224)"
                  ></path>
                </svg>
              </span>

              {/* <PlusOutlined style={{ fontSize: '25px' }} /> */}
            </Button>
          </Tooltip>
          <Tooltip title={'小程序预览'}>
            <Button>
              <span style={{ padding: '0px' }}>
                <svg
                  t="1713870106827"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8912"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 1024C229.6832 1024 0 794.3168 0 512S229.6832 0 512 0s512 229.6832 512 512-229.6832 512-512 512z m0-960C265.0112 64 64 265.0112 64 512S265.0112 960 512 960 960 758.9888 960 512 758.9888 64 512 64z"
                    p-id="8913"
                    fill="rgb(115, 137, 224)"
                  ></path>
                  <path
                    d="M363.1104 828.8256c-41.5744 0-82.944-12.8-116.1216-38.912-36.7616-28.9792-58.6752-69.8368-61.7472-114.9952-3.072-46.3872 14.0288-91.3408 48.128-126.464l94.3104-97.28a32.02048 32.02048 0 0 1 45.9776 44.544l-94.3104 97.1776c-21.4016 22.016-32.0512 49.5616-30.208 77.6192 1.7408 26.8288 15.0528 51.3024 37.4784 69.0176 49.664 39.1168 126.7712 32.8704 172.032-13.7216 32.1536-33.1776 46.2848-76.0832 38.8096-117.9648l-32.8704-183.7056c-10.9568-61.2352 9.1136-123.4944 54.8864-170.7008l0.512-0.512c67.4816-69.0176 182.6816-77.6192 257.1264-18.944 36.7616 28.9792 58.7776 69.8368 61.7472 114.9952 3.072 46.3872-14.0288 91.3408-48.128 126.464l-93.3888 96.256a32.02048 32.02048 0 0 1-45.9776-44.544l93.3888-96.256c21.4016-22.016 32.0512-49.5616 30.208-77.6192-1.8432-26.8288-15.1552-51.3024-37.4784-69.0176-49.5616-39.0144-126.7712-32.8704-172.032 13.7216l-0.4096 0.4096c-31.0272 32.256-44.6464 73.9328-37.4784 114.4832l32.8704 183.7056c11.1616 62.3616-9.216 125.6448-55.9104 173.7728-37.376 38.6048-89.6 58.4704-141.4144 58.4704z"
                    p-id="8914"
                    fill="rgb(115, 137, 224)"
                  ></path>
                </svg>
              </span>
            </Button>
          </Tooltip>
        </Space>
      </div>
    </div>
  );
};
export default Footer;
